<template>
	<view class="form-wrap">
		<u--form v-if="Object.keys(this.model).length > 0" labelPosition="left" :model="model" :rules="rules"
			errorType="toast" ref="uForm">
			<u-form-item v-if="item.prop" :prop="item.prop" class="item" className="img-formItem" v-for="item in data">
				<view class="item-label">{{item.label || ''}}</view>
				<view class="item-content">
					<customComponents :componentName="item.componentName" type="text" :name="item.name"
						:valueData="item.value" :placeholder="item.placeholder" :fileList="item.fileList || []"
						:show="item.show || false" :children="item.children || []"
						:placement="item.placement || 'column'" border="none" @input="handleInput" @change="handleInput"
						@blur="handleInput"></customComponents>
				</view>
			</u-form-item>

			<u-form-item v-else class="item" className="img-formItem" v-for="item in data">
				<view class="item-label">{{item.label || ''}}</view>
				<view class="item-content">
					<customComponents :componentName="item.componentName" type="text" :name="item.name"
						:valueData="item.value" :placeholder="item.placeholder" :fileList="item.fileList || []"
						:show="item.show || false" :placement="item.placement || 'column'"
						:children="item.children || []" border="none" @input="handleInput" @change="handleInput"
						@blur="handleInput">
					</customComponents>
				</view>
			</u-form-item>
		</u--form>
		<subBtn @sub="handleSub" :subTxt="subTxt"></subBtn>
	</view>
</template>

<script>
	import customComponents from "../custom-component";
	import subBtn from "../sub-btn";
	export default {
		name: "subform",
		props: {
			data: {
				type: Array,
				default () {
					return []
				}
			},
			rules: {
				type: Object,
				default () {
					return {}
				}
			},
			subTxt: {
				type: String,
				default: '保存'
			},
		},
		created() {
			this.initModel()
		},
		data() {
			return {
				model: {}
			}
		},
		methods: {
			initModel() {
				if (Array.isArray(this.data)) {
					for (let i = 0; i < this.data.length; i++) {
						this.$set(this.model, this.data[i].name, this.data[i].value)
					}
				}
			},
			handleSub(data) {
				console.log(data);
				return new Promise((resolve, reject) => {
					this.$refs.uForm.validate().then(res => {
						if (!Array.isArray(res)) {
							this.$emit('ok', this.model)
							resolve(res)
						}

					}).catch(err => {
						reject(err)
					})
				})
			},
			handleInput(name, val) {
				this.$set(this.model, name, val)
				this.model[name] = val
			},
		},
		watch: {
			data: {
				handler(val) {
					this.initModel()
				},
				deep: true
			}
		},
		components: {
			customComponents,
			subBtn,
		}
	}
</script>

<style lang="scss" scoped>
	.form-wrap {
		width: 100%;
		box-sizing: border-box;
		height: auto;
		padding: 0 20rpx;
	}

	.item-label {
		width: 100%;
		height: auto;
		font-weight: bold;
		color: #000;
		font-size: 30rpx;
	}

	.item-content {
		width: 100%;
		min-height: 80rpx;
		height: auto;
		margin-top: 30rpx;
	}

	::v-deep .item-content input {
		width: 100%;
		min-height: 80rpx;
		height: auto;
		background-color: #efefef;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	::v-deep .item-content textarea {
		width: 100%;
		min-height: 80rpx;
		height: auto;
		background-color: #efefef;
		box-sizing: border-box;
	}

	::v-deep .item-content .u-textarea {
		width: 100%;
		min-height: 80rpx;
		height: auto;
		background-color: #efefef;
		box-sizing: border-box;
	}

	.btn-wrap {
		width: 100%;
		height: auto;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 60rpx;
	}

	.btn-wrap .button {
		border: none;
		width: 90%;
		height: 70rpx;
		line-height: 70rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: $global-color-golden;
		border-radius: 35rpx;
		color: #fff;
		font-size: 32rpx;
		font-weight: 400;
	}
</style>